<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../static/css/mui.min.css">
    <link rel="stylesheet" href="../static/css/native.css">
    <style>
        html,
        body {
            background-color: #efeff4;
        }
        p {
            text-indent: 22px;
        }
        span.mui-icon {
            font-size: 14px;
            color: #007aff;
            margin-left: -15px;
            padding-right: 10px;
        }
        .mui-off-canvas-right {
            color: #fff;
        }
        .title {
            margin: 35px 15px 10px;
        }
        .title+.content {
            margin: 10px 15px 35px;
            color: #bbb;
            text-indent: 1em;
            font-size: 14px;
            line-height: 24px;
        }
        input {
            color: #000;
        }
        #offCanvasSide{

        }
        .mui-card{
            background: inherit;
        }
        .mui-table-view-inverted{
            border-radius: 0px;
            background: inherit;
        }
        .mui-card .mui-table-view .mui-collapse{
            background: inherit;
        }
    </style>
</head>

<body>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    <!--菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-right">
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="title" style="margin-bottom: 25px;">分类筛选</div>
                <div class="mui-card">
                    <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                        <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">产品</a>
                            <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                                <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">iOS</a>
                                </li>
                                <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">Android</a>
                                </li>
                                <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">HTML5</a>
                                </li>
                            </ul>
                        </li>
                        <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">方案</a>
                            <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                                <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">PC方案</a>
                                </li>
                                <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">手机方案</a>
                                </li>
                                <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">TV方案</a>
                                </li>
                            </ul>
                        </li>
                        <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">新闻</a>
                            <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                                <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">公司新闻</a>
                                </li>
                                <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">行业新闻</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </aside>
    <div class="mui-inner-wrap">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
            <a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
            <h1 class="mui-title">左滑导航</h1>
        </header>
        <div class="elections">

        </div>
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll mui-content" sty>
                <div class="election">

                </div>
                <div class="list_under_election" style="margin-bottom: 15px;">
                    <ul class="mui-table-view mui-grid-view">
                        <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="../static/images/qrcode.png">
                            </a>
                            <div class="item-name">
                               <span>幸福就是可以一起睡觉</span>
                            </div>
                            <div class="mui-media-body item-info">
                                <span> 129￥ </span>
                                <span> 138￥ </span>
                                <span> ＋ </span>
                            </div>
                        </li>
                      
                    </ul>
                </div>
            </div>
        </div>
        <!-- off-canvas backdrop -->
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
<script src="../static/js/mui.min.js"></script>
<script>
    mui.init({
        swipeBack: false,
    });
    //侧滑容器父节点
    var offCanvasWrapper = mui('#offCanvasWrapper');
    //主界面容器
    var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
    //菜单容器
    var offCanvasSide = document.getElementById("offCanvasSide");
    //Android暂不支持整体移动动画
    if (!mui.os.android) {
        var spans = document.querySelectorAll('.android-only');
        for (var i = 0, len = spans.length; i < len; i++) {
            spans[i].style.display = "none";
        }
    }
    //移动效果是否为整体移动
    var moveTogether = false;
    //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
    var classList = offCanvasWrapper[0].classList;
    //变换侧滑动画移动效果；
    classList.add('mui-slide-in');
    //主界面和侧滑菜单界面均支持区域滚动；
    mui('#offCanvasSideScroll').scroll();
    mui('#offCanvasContentScroll').scroll();
    //实现ios平台的侧滑关闭页面；
    if (mui.os.plus && mui.os.ios) {
        offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
            plus.webview.currentWebview().setStyle({
                'popGesture': 'none'
            });
        });
        offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件
            plus.webview.currentWebview().setStyle({
                'popGesture': 'close'
            });
        });
    }
</script>
</body>

</html>